<template>
	<view class="content">
		<view class="tabs">
			<view :class="{tab:true,on: tabIndex == 0}" @click="changeTab(0)">我的申请</view>
			<view :class="{tab:true,on: tabIndex == 1}" @click="changeTab(1)">申请成功</view>
		</view>
		<scroll-view scroll-y class="listBox" @scrolltolower="scrollLoading">
			<view class="empty" v-if="logs.length == 0">
				<image src="@/static/image/empty.png" mode="widthFix"></image>
				<view class="text">暂无数据</view>
			</view>
			<view class="group" v-for="(log, l) in logs" :key="l">
				<view class="status" :class="[log.status==1?'on':'']">{{log.status==1?'审核成功':'待审核'}}</view>
				<button type="primary" size="mini" class="authBtn" @click="complaint(log)"
					v-if="log.status==0 && (time - log.create_time) > 60 * 60" >申述</button>
				<view class="row">审核人：{{log.audit_name}}【ID:{{log.audit_user_id}}】</view>
				<view class="row">
					审核电话：{{log.audit_mobile}}
					<uni-tag text="点击拨号" type="success" class="tag" size="mini" @click="callPhone(log.audit_mobile)"/>
				</view>
				<view class="row">
					审核微信：{{log.audit_wechat}}
					<uni-tag text="点击复制" type="success" class="tag" size="mini" @click="copy(log.audit_wechat)"/>
				</view>
				<view class="row">升级等级：{{log.level - 1}}级 → {{log.level}}级</view>
				<view class="row">申请时间：{{log.create_time_text}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import common from '@/static/js/common';

	export default {
		data() {
			return {
				tabIndex: 0,
				page: 1,
				count: 0,
				time: 0,
				logs: []
			}
		},
		mounted() {
			this.getLogsInfo()
		},
		methods: {
			changeTab(tab) {
				this.tabIndex = tab
				this.page = 1
				this.getLogsInfo()
			},
			scrollLoading() {
				if (this.logs.length < this.count) {
					this.page ++
					this.getLogsInfo()
				}
			},
			getLogsInfo() {
				let that = this;
				common.api({
					method: 'GET',
					url: '/mobile/index/applyList',
					data: {
						status: that.tabIndex,
						page: that.page,
						limit: 10
					},
					success:(res) => {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.time = Number(res.time)
						that.count = res.data.count
						res.data.list = res.data.list.map(item => {
							item['create_time_text'] = common.formatTime(item.create_time*1000,'YYYY-MM-DD HH:mm:ss')
							return item
						})
						if (that.page == 1) {
							that.logs = res.data.list
						} else {
							that.logs.push(...res.data.list)
						}
					},
					error:() => {
						uni.showToast({ title: '数据请求异常', icon: 'none' });
					}
				});
			},
			callPhone(data) {
				uni.makePhoneCall({
					phoneNumber: data,
					success: () => {}
				});
			},
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {}
				});
			},
			complaint(log) {
				uni.navigateTo({url:'/pages/other/complaint?id='+log.id})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabs {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		.tab {
			width: 50vw;
			height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
			border-bottom: 4rpx solid transparent;
			&.on {
				color: #f90;
				border-color: #f90;
			}
		}
	}
	.listBox {
		width: calc(100vw - 60rpx);
		height: calc(100vh - 220rpx);
		padding: 24rpx 30rpx;
		.group {
			padding: 16rpx 24rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 0 8rpx rgba(0,0,0,.1);
			color: #999;
			position: relative;
			.row {
				font-size: 24rpx;
				padding: 6rpx 0;
				display: flex;
				align-items: center;
				.tag {
					margin-left: 30rpx;
				}
			}
			.status {
				color: #f90;
				position: absolute;
				top: 20rpx;
				right: 24rpx;
				&.on {
					color: #18bc37;
				}
			}
			.authBtn {
				position: absolute;
				bottom: 20rpx;
				right: 24rpx;
			}
		}
	}
</style>
